import { useThrottleFn, useDebounceFn } from '@vueuse/core'
import { onUnmounted, onMounted } from 'vue'

export const observeResize = (domSelector, handler, awaittime = 20) => {
  const fn = useDebounceFn(handler, awaittime)
  const resize0bserver = new ResizeObserver(() => {
    // console.log('observeResize');
    // requestAnimationFrame(() => {
    //   handler();
    // });
    fn()
  })
  resize0bserver.observe(document.querySelector(domSelector))
  return resize0bserver
}

const useObserveResize = (domSelector, handler) => {
  let resize0bserver
  onMounted(() => {
    resize0bserver = observeResize(domSelector, handler)
  })
  onUnmounted(() => {
    resize0bserver &&
      document.querySelector(domSelector) &&
      resize0bserver.unobserve(document.querySelector(domSelector))
  })
}
export default useObserveResize
